<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../VueJs/vue.js"></script>
</head>

<body>
    <!-- 
        收集表单数据：
        		若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
        		若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
        		若：<input type="checkbox"/>
        				1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
        				2.配置input的value属性，并且:
        						(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
        						(2)v-model的初始值是数组，那么收集的的就是value组成的数组
        		备注：v-model的三个修饰符：
        						lazy：失去焦点再收集数据
        						number：输入字符串转为有效的数字
        						trim：输入首尾空格过滤
-->
    <div id="root">
        <form @submit.prevent="demo"><!-- 阻止提交时的默认跳转页面行为，2选1 -->
            账户:<input type="text" v-model.trim="userInfo.account"><br><br>
            <!-- 修饰符trim：输入首尾空格过滤 中间空格去不掉-->

            密码:<input type="password" v-model="userInfo.password"><br><br>

            年龄:<input type="number" v-model.number="userInfo.age"><br><br><!-- v-model修饰符 .number：输入字符串转为有效的数字 -->
            <!-- 一般两个number同时使用 -->

            性别: <input type="radio" name="sex" id="male" v-model="userInfo.sex" value="male"><label for="male">男</label>
            <input type="radio" name="sex" id="female" v-model="userInfo.sex" value="female"><label
                for="female">女</label><br><br>

            爱好: <input type="checkbox" name="hobby" v-model="userInfo.hobby" value="study">学习
            <input type="checkbox" name="hobby" v-model="userInfo.hobby" value="game">游戏
            <input type="checkbox" name="hobby" v-model="userInfo.hobby" value="eat">吃饭<br><br>

            所处校区: <select v-model="userInfo.city"><!-- 收集数字，1：v-model.number 2：:value 3,parseInt -->
                <option value="0">请选择校区</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="深圳">深圳</option>
                <option value="武汉">武汉</option>
            </select><br><br>

            其他信息: <textarea cols="30" rows="10" style="resize: none;"
                v-model.lazy.trim="userInfo.other"></textarea><br><br>
            <!-- 只要一更改就收集信息，加了修饰符后，lazy：失去焦点再收集数据 -->

            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="JavaScript:;">《用户协议》</a><br><br>

            <input type="submit" value="提交" @click.prevent="demo"><!-- 阻止提交时的默认跳转页面行为，2选1 -->
        </form>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    Vue.config.devtools = true;

    const vm = new Vue({
        el: '#root',
        data: {
            userInfo: {
                account: "",
                password: "",
                age: "",
                sex: "female",//默认选中女，
                hobby: [],/* hobby的初始值会影响v-model收集回来的数据 */
                city: "0",//默认选中value为0的option
                other: "",
                agree: ""
            }
        },
        methods: {
            demo: function () {
                // 输出收集到的数据
                // console.log(JSON.stringify(this._data));//将数据转为json格式
                console.log(JSON.stringify(this.userInfo));
            }
        }
    });
</script>

</html>